import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import { HomeWrapper,HomeLeft,HomeRight, BackTop } from './styled'
import  Topic  from './components/Topic'
import  ArcList  from './components/ArcList'
import  Recommond  from './components/Recommond'
import  DownloadApp  from './components/DownloadApp'
import  Writer  from './components/Writer'
import  { actionCreater } from './store'


class Home extends PureComponent {
    render(){
        const backToTop = ()=>{
            window.scrollTo(0,0)
        }
        const { backTopShow } = this.props
        return <div>
            <HomeWrapper>
                <HomeLeft>
                    <img className='banner-img' src="https://upload.jianshu.io/admin_banners/web_images/4589/bd702bcdffe78c631522a3906e3440bd9b16a170.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540" alt=""/>
                    <Topic />
                    <ArcList />
                </HomeLeft>
                <HomeRight>
                    <Recommond/>
                    <DownloadApp/>
                    <Writer/>
                </HomeRight>
            </HomeWrapper>
            {backTopShow ? <BackTop onClick={backToTop}>顶部</BackTop> : ''}
        </div>
    }
    componentDidMount(){
        this.props.initHomeData()
        this.bindEvents()
    }
    componentWillUnmount(){
        window.removeEventListener("scroll", this.props.changeBackTopShow )
    }
    bindEvents(){
        window.addEventListener("scroll", this.props.changeBackTopShow )
    }
}

const mapState = (state) => ({
    topicList: state.getIn(['home','topicList']),
    arcList: state.getIn(['home','arcList']),
    recommondList: state.getIn(['home','recommondList']),
    writerList: state.getIn(['home','writerList']),
    backTopShow: state.getIn(['home','backTopShow'])
})
const mapDispatch = (dispatch) => ({
    initHomeData(){
        dispatch(actionCreater.getHomeData())
    },
    changeBackTopShow(){
        if(document.documentElement.scrollTop>200){
            dispatch(actionCreater.changeBackTopShowAction(true))
        }else{
            dispatch(actionCreater.changeBackTopShowAction(false))
        }
    }

})

export default connect(mapState, mapDispatch)(Home)
